<template>
    <div>
        <!-- 搜索栏 -->
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="关键词" prop="prompt">
                    <div class="w-[250px]">
                        <el-input
                            v-model="queryParams.prompt"
                            placeholder="请输入关键词"
                            clearable
                            @keyup.enter="resetPaging"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="用户编号" prop="user">
                    <div class="w-[250px]">
                        <el-input
                            v-model="queryParams.user"

                            placeholder="请输入用户编号"
                            clearable
                            @keyup.enter="resetPaging"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="所属分类">
                    <el-select v-model="queryParams.cate_id" class="w-[250px]">
                        <el-option value="" label="全部" />
                        <el-option
                            v-for="(item, index) in categoryList"
                            :key="index"
                            :value="item.id"
                            :label="item.name"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="来源方式">
                    <el-select v-model="queryParams.source" class="w-[250px]">
                        <el-option value="" label="全部" />
                        <el-option value="1" label="官方" />
                        <el-option value="2" label="用户" />
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="queryParams.audit_status" class="w-[250px]">
                        <el-option value="" label="全部" />
                        <el-option value="0" label="等待审核" />
                        <el-option value="1" label="审核通过" />
                        <el-option value="2" label="拒绝通过" />
                    </el-select>
                </el-form-item>
                <el-form-item label="显示状态">
                    <el-select v-model="queryParams.is_enable" class="w-[250px]">
                        <el-option value="" label="全部" />
                        <el-option value="1" label="显示" />
                        <el-option value="0" label="隐藏" />
                    </el-select>
                </el-form-item>
                <el-form-item label="公开时间">
                    <date-picker
                        v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPaging">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格栏 -->
        <el-card v-loading="pager.loading" class="!border-none" shadow="never">
            <el-table :data="pager.lists" size="large" class="mt-4">
                <el-table-column label="公开用户" prop="robot" min-width="150">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-avatar :src="row.user?.avatar" />
                            <div class="ml-2">
                                <p class="text-tx-regular">{{ row?.user?.nickname || '-' }}</p>
                                <p class="text-xs text-tx-placeholder">{{ row?.user?.sn || '-' }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="生成视频" min-width="130">
                    <template #default="{ row }">
                        <material-file
                            file-size="100px"
                            class="cursor-pointer"
                            type="video"
                            :url="row.video_url"
                            @click="handlePreview(row.video_url)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="视频描述" prop="prompt" min-width="120">
                    <template #default="{ row }">
                        <popup title="提示词" cancelButtonText="" confirmButtonText="">
                            <template #trigger>
                                <div class="line-clamp-2 cursor-pointer">
                                    {{ row?.prompt || '-' }}
                                </div>
                            </template>
                            <div class="p-4">
                                <div>
                                    <div class="font-bold mb-1">记录编号：</div>
                                    <div class="bg-page rounded-md p-2">
                                        {{ row?.video_code }}
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <div class="font-bold mb-1">视频描述：</div>
                                    <div class="bg-page rounded-md p-2">
                                        {{ row?.prompt || '-' }}
                                    </div>
                                </div>
                            </div>
                        </popup>
                    </template>
                </el-table-column>
                <el-table-column label="所属分类" prop="category" min-width="100"  />
                <el-table-column label="排序" prop="sort" min-width="80" />
                <el-table-column label="公开次数" prop="public_sum" min-width="80" />
                <el-table-column label="添加来源" prop="source" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.source === 1" type="info">官方</el-tag>
                        <el-tag v-if="row.source === 2" type="info">用户</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" prop="audit_status" min-width="100">
                    <template #default="{ row }">
                        <el-tag v-if="row.audit_status === 0" type="info">等待审核</el-tag>
                        <el-tag v-if="row.audit_status === 1" type="success">审核通过</el-tag>
                        <el-tag v-if="row.audit_status === 2" type="warning">拒绝通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否显示" prop="is_enable" min-width="100">
                    <template #default="{ row }">
                        <div @click="handleDisable(row.id, row.is_enable)">
                            <el-tag v-if="row.is_enable === 1">是</el-tag>
                            <el-tag v-else type="danger">否</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="公开时间" prop="create_time" min-width="170" />
                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-if="row.audit_status === 0"
                            v-perms="['square:video:audit']"
                            type="warning"
                            link
                            @click="handleAudit(row)"
                        >
                            审核
                        </el-button>
                        <el-button
                            v-perms="['square:video:edit']"
                            type="primary"
                            link
                            @click="handleEditor(row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            v-perms="['square:video:delete']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </el-card>

        <!-- 审核器 -->
        <audit v-if="showAudit" ref="auditRef" @success="queryLists" @close="showAudit = false" />

        <!-- 编辑器 -->
        <editor v-if="showEdit" ref="editorRef" @success="queryLists" @close="showEdit = false" />

        <!-- 预览 -->
        <material-preview v-model="previewState.show" type="video" :url="previewState.url" />
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import squareCategoryApi from '@/api/square/category'
import squareVideoApi from '@/api/square/video'
import Audit from './audit.vue'
import Editor from './editor.vue'

const showAudit = ref<boolean>(false)
const auditRef = shallowRef<InstanceType<typeof Audit>>()

const showEdit = ref<boolean>(false)
const editorRef = shallowRef<InstanceType<typeof Editor>>()

const categoryList = ref<any[]>([])

// 查询参数
const queryParams = reactive({
    prompt: '',
    user: '',
    source: '',
    cate_id: '',
    is_enable: '',
    audit_status: '',
    start_time: '',
    end_time: ''
})

// 预览参数
const previewState = reactive({
    show: false,
    url: ''
})

// 分页查询
const { pager, queryLists, resetParams, resetPaging } = usePaging({
    fetchFun: squareVideoApi.lists,
    params: queryParams
})

/**
 * 查询分类
 */
const queryCategory = async () => {
    categoryList.value = await squareCategoryApi.whole({type: 'draws'})
}

/**
 * 处理审核
 *
 * @param {any} row
 * @returns {Promise<void>}
 */
const handleAudit = async (row?: any): Promise<void> => {
    showAudit.value = true
    await nextTick()
    auditRef.value?.open(row)
}

/**
 * 处理编辑
 *
 * @param {any} row
 * @returns {Promise<void>}
 */
const handleEditor = async (row?: any): Promise<void> => {
    showEdit.value = true
    await nextTick()
    editorRef.value?.open(row)
}

/**
 * 处理删除
 *
 * @param {number} id
 * @returns {Promise<void>}
 */
const handleDelete = async (id: number): Promise<void> => {
    feedback.prompt('请输入删除原因', '删除广场视频', {
        inputType: 'textarea',
        inputPattern: /.+/,
        inputErrorMessage: '删除原因不能为空',
    }).then(async (v) => {
        await squareVideoApi.delete(id, v.value)
        feedback.msgSuccess('删除成功')
        await queryLists()
    }).catch(() => {})
}

/**
 * 处理状态
 *
 * @param {number} id
 * @param {number} status
 */
const handleDisable = async (id: number, status: number) => {
    if (status === 1) {
        feedback.prompt('请输入隐藏原因', '隐藏视频', {
            inputType: 'textarea',
            inputPattern: /.+/,
            inputErrorMessage: '隐藏原因不能为空',
        }).then(async (v) => {
            await squareVideoApi.disable(id, v.value)
            feedback.msgSuccess('禁用成功')
            await queryLists()
        }).catch(() => {})
    } else {
        feedback.confirm('确定要显示该视频吗?')
            .then(async () => {
                await squareVideoApi.disable(id)
                feedback.msgSuccess('解禁成功')
                await queryLists()
            }).catch(() => {})
    }
}

/**
 * 预览视频
 *
 * @param {string} url
 */
const handlePreview = (url: string) => {
    previewState.url = url
    setTimeout(() => {
        previewState.show = true
    })
}

onMounted(async () => {
    await queryCategory()
    await queryLists()
})
</script>
